
<template>
	
	<div scoped class="swiper1">
		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="item in swiperList" :key="item.id">
				<img :src="item.imgUrl" />
			</swiper-slide>
			<!--<swiper-slide>
				<img src="../../../assets/img/banner1.jpg" />
			</swiper-slide>-->
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>

		</swiper>
	</div>
</template>

<script>
	export default {
		props:["swiperList"],
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination',
					},
					loop:true,
					autoplay:true
				}
				/*swiperList:[
				  {
				  	id:1,
				  	imgUrl:require("@/assets/img/swiper01.jpg")
				  	
				  },
				  {
				  	id:2,
				  	imgUrl:require("@/assets/img/swiper02.jpg")
				  	
				  },
				  {
				  	id:3,
				  	imgUrl:require("@/assets/img/swiper03.jpg")
				  	
				  },
				  {
				  	id:4,
				  	imgUrl:require("@/assets/img/swiper04.jpg")
				  	
				  },
				  {
				  	id:5,
				  	imgUrl:require("@/assets/img/swiper05.jpg")
				  	
				  },
				  {
				  	id:6,
				  	imgUrl:require("@/assets/img/swiper06.jpg")
				  	
				  },
				  {
				  	id:7,
				  	imgUrl:require("@/assets/img/swiper07.jpg")
				  	
				  },
				  
				]
				*/

			}
		}
	}
</script>

<style scoped>
	.swiper1 {
		width: 100%;
		height: 1rem;
	}
	
	.swiper1 img {
		width: 100%;
		height: 100%;
	}
	.swiper1 >>> .swiper-pagination-bullet-active{
		background: #FFFFFF;
	}
</style>
